<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  .boxa{
	width: 300px;
	height: 150px;
	background: yellow;
	border: 1px solid green;
	border-radius: 10px;
	position: relative;
	top: -11px;
	display: none;
  }

  .boxb{
	width: 300px;
	height: 150px;
	background: yellow;
	border: 1px solid green;
	border-radius: 10px;
	position: relative;
	top: -11px;
	display: block;
  }
  </style>

 </head>
 <body>
  <div>
	<form>
		<p>姓名:
			<input type="text" />
		</p>

		<p>性别:
			<input type="radio" name="sex" />男
			<input type='radio' name="sex"/>女
		</p>

		<p>兴趣:
			<input type="checkbox" name="sex"/>游戏
			<input type='checkbox' name="sex"/>运动
			<input type='checkbox' name="sex"/>看书
			<input type='checkbox' name="sex"/>听音乐
			<input type='checkbox' name="sex"/>寻找美食
			<input type='checkbox' name="sex"/>摄影
		</p>

		<p>联系方式:
			<input type="text"/>
		</p>

		<p>QQ:
			<input type="text"/>
		</p>

		<p>来自:
			<select>
				<option>广东省</option>
				<option>江西省</option>
				<option>湖南省</option>
			</select>
		</p>

		<p>E-mail:
			<input type="text"/>
		</p>

		<p>内容:
			<textarea></textarea>
		</p>

		<span>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
			<span id="box">
				<input type='checkbox' name="sex"/>十天内免登陆
			</span>
		</span>

		
		<p id="boxc"; class="boxa">
			hahahahahahahahahahahahahahahaha<br/>hahahahahahahahahahahaha
		</p>
	</form>
</div>
 </body>
</html>

<script>
var oBox = document.getElementById('box');
var oBoxc = document.getElementById('boxc');
//oBoxc.className = 'boxb';
oBox.onmouseover = function(){
	oBoxc.className = 'boxb';
};
</script>
